<template>
    <div>
        <v-header>
            <div slot="left" class="backs_icon"></div>
        </v-header>
        <div class="main_allScroll">
            <div class="startBefore_box" v-if="gameStatus == 'startBefore'">
                <div class="startbtn" @click="gameStart"></div>
                <p @click="seeMyPrizes">查看我的奖品</p>
            </div>
            <div class="gameStart_box" v-if="gameStatus == 'start'">
                <div class="start_bgColor" ref="advertBox">
                    <div class="start_three" v-show="countdown == 3"></div>
                    <div class="start_two" v-show="countdown == 2"></div>
                    <div class="start_one" v-show="countdown == 1"></div>
                    <div class="start_go" v-show="countdown == 0"></div>

                </div>
            </div>
            <div class="gameStart_box" v-if="gameStatus == 'game'">
                <div class="start_bgColor" ref="advertBox">
                    <div class="gameTime"><span>{{gameTime}}</span></div>
                    <ul class="cakeBox">
                        <li v-for="(v,i) in cakeArr"
                            :class = "v.className"
                            @touchend="cakeBoxClick(v)"
                            :style="{width:v.width + 'px',height:v.width + 'px',top:v.top + 'px',left:v.left + 'px'}"></li>
                    </ul>
                </div>
            </div>
            <div class="gameStart_box" v-if="gameStatus == 'end' || gameStatus == 'open'">
                    <div v-transfer-dom>
                        <popup v-model="gameEndShow" position="top" height="100%" should-scroll-top-on-show :hide-on-blur="false">
                            <div class="gameEnd" :class="prizes.prizesType == 6 ? '' : prizes.prizesType == 5 ? 'active ok' : 'ok'">
                                <img
                                        v-if="prizes.prizesType == 1"
                                        :src="prizes.prizesPrice == 5 ? RedEnvelopeRain_5 :
                                prizes.prizesPrice == 10 ? RedEnvelopeRain_10 :
                                prizes.prizesPrice == 15 ? RedEnvelopeRain_15 :
                                prizes.prizesPrice == 20 ? RedEnvelopeRain_20 :
                                prizes.prizesPrice == 25 ? RedEnvelopeRain_25 :
                                prizes.prizesPrice == 30 ? RedEnvelopeRain_30 :
                                prizes.prizesPrice == 35 ? RedEnvelopeRain_35 :
                                prizes.prizesPrice == 40 ? RedEnvelopeRain_40 :
                                prizes.prizesPrice == 45 ? RedEnvelopeRain_45 :
                                prizes.prizesPrice == 50 ? RedEnvelopeRain_50 : ''" alt="">
                                <img v-if="prizes.prizesType == 3" v-lazy="{src:RedEnvelopeRain_ticket_10}" alt="">
                                <img v-if="prizes.prizesType == 4" v-lazy="{src:RedEnvelopeRain_treasure}" alt="">
                                <img v-if="prizes.prizesType == 5" v-lazy="{src:RedEnvelopeRain_youxian_s}" alt="">
                                <p v-if="prizes.prizesType != 6">获得{{prizes.prizesType == 1 ? '红包': prizes.prizesType == 2 ? '实物':
                                    prizes.prizesType == 3 ? '优惠券': prizes.prizesType == 4 ? '宝石券': prizes.prizesType == 5 ? '优先券': ''
                                    }}×{{prizes.prizesNumber}}</p>
                                <div class="gameEndBth" :class="frequency > 0 ?'ok' : ''" @click="init()">
                                    <p>剩余游戏次数：{{frequency}}次</p>
                                </div>
                            </div>
                        </popup>
                    </div>
            </div>
        </div>
        <!--我的奖品-->
        <div v-transfer-dom class="myPrizes">
            <popup v-model="myPrizesShow" position="top" should-scroll-top-on-show :hide-on-blur="false">
                <div scrollable class="vux-scrollable">
                    <div class="show_header_title">
                        <div class="title">领奖记录</div>
                        <span @click="closeMyPrizes"></span>
                    </div>
                    <div class="show_list">
                        <scroller :on-infinite="loadMore ? infinite : getDone" ref="qixiScroller">
                            <div class="list_cont" v-for="prizes in prizesList">
                                <div class="fight_left">
                                    <img v-show="prizes.prizesType == 1"
                                         v-lazy="{src:prizes.prizesPrice == 5 ? RedEnvelopeRain_5 : prizes.prizesPrice == 10 ? RedEnvelopeRain_10 : prizes.prizesPrice == 15 ? RedEnvelopeRain_15 : prizes.prizesPrice == 20 ? RedEnvelopeRain_20 : prizes.prizesPrice == 25 ? RedEnvelopeRain_25 : prizes.prizesPrice == 30 ? RedEnvelopeRain_30 : prizes.prizesPrice == 35 ? RedEnvelopeRain_35 : prizes.prizesPrice == 40 ? RedEnvelopeRain_40 : prizes.prizesPrice == 45 ? RedEnvelopeRain_45 : prizes.prizesPrice == 50 ? RedEnvelopeRain_50 : ''}"
                                         alt="">
                                    <img v-show="prizes.prizesType == 3" v-lazy="{src:RedEnvelopeRain_ticket_10}" alt="">
                                    <img v-show="prizes.prizesType == 4" v-lazy="{src:RedEnvelopeRain_treasure}" alt="">
                                    <img v-show="prizes.prizesType == 5" v-lazy="{src:RedEnvelopeRain_youxian}" alt="">
                                    <div class="list_time">
                                        <p class="name">{{prizes.prizesType == 1 ? '红包': prizes.prizesType == 2 ? '实物':
                                            prizes.prizesType == 3 ? '优惠券': prizes.prizesType == 4 ? '宝石券': prizes.prizesType == 5 ? '优先券': ''
                                            }}*{{prizes.prizesNumber}}</p>
                                        <p class="time">{{prizes.confirmTime}}</p>
                                    </div>
                                </div>
                            </div>
                            <load-more v-show="!loadMore" :show-loading="false" tip="我是有底线的"
                                       background-color="#fbf9fe"></load-more>
                        </scroller>
                    </div>
                </div>
            </popup>
        </div>
    </div>
</template>
<script>
  import {TransferDom, Popup, LoadMore} from 'vux'

  export default {
    name: 'RedEnvelopeRain',
    directives: {
      TransferDom
    },
    components: {
      Popup,
      LoadMore
    },
    data() {
      return ({
        RedEnvelopeRain_5: require('../../assets/img/RedEnvelopeRain_5.png'),
        RedEnvelopeRain_10: require('../../assets/img/RedEnvelopeRain_10.png'),
        RedEnvelopeRain_15: require('../../assets/img/RedEnvelopeRain_15.png'),
        RedEnvelopeRain_20: require('../../assets/img/RedEnvelopeRain_20.png'),
        RedEnvelopeRain_25: require('../../assets/img/RedEnvelopeRain_25.png'),
        RedEnvelopeRain_30: require('../../assets/img/RedEnvelopeRain_30.png'),
        RedEnvelopeRain_35: require('../../assets/img/RedEnvelopeRain_35.png'),
        RedEnvelopeRain_40: require('../../assets/img/RedEnvelopeRain_40.png'),
        RedEnvelopeRain_45: require('../../assets/img/RedEnvelopeRain_45.png'),
        RedEnvelopeRain_50: require('../../assets/img/RedEnvelopeRain_50.png'),
        RedEnvelopeRain_ticket_10: require('../../assets/img/RedEnvelopeRain_ticket_10.png'),
        RedEnvelopeRain_treasure: require('../../assets/img/RedEnvelopeRain_treasure.png'),
        RedEnvelopeRain_youxian: require('../../assets/img/RedEnvelopeRain_youxian.png'),
        RedEnvelopeRain_youxian_s: require('../../assets/img/RedEnvelopeRain_youxian_s.png'),
        pageNum: 1,
        loadMore: false,
        show: false,
        myPrizesShow: false,
        prizesList: [],
        gameStatus: 'startBefore', // startBefore 开始之前  start 开始  game 游戏中  end 游戏结束  open 中奖 openAfter 打开之后
        countdown: 3,
        cakeArr: [],
        cakeArrLength:100,
        gameTime:20,
        gameEndShow:true,
        frequency:0,
        prizesId: '',
        prizes:{},
      })
    },
    activated(){
        this.init()
    },
    deactivated() {
      this.gameStatus = 'startBefore'
      this.gameTime = 0
    },
    methods: {
      init(){
        this.pageNum = 1;
        this.loadMorefalse;
        this.show=false;
        this.myPrizesShow=false;
        this.prizesList=[];
        this.gameStatus='startBefore'; // startBefore 开始之前  start 开始  game 游戏中  end 游戏结束  open 中奖 openAfter 打开之后
        this.countdown=3;
        this.cakeArr=[];
        this.cakeArrLength=50;
        this.gameTime=20;
        this.gameEndShow=true;
        this.frequency=0;
        this.prizesId='';
        this.prizes={};
          this.Interactive.customStatistics({type: 2, eventID: 'activity_area',map: {name: this.$router.meta.title}})
      },
      seeMyPrizes() {
        if (!this.comJS.getCookie('t')) {
          this.Interactive.pushTokentoJS();
          return
        }
        this.show = false
        this.myPrizesShow = true
        this.prizesList = []
        this.loadMore = false
        this.pageNum = 1
        this.queryMyPrizes()
      },
      closeMyPrizes() {
        this.myPrizesShow = false
        this.show = true
      },
      refresh(done) {
        global.myLoad = true
        this.pageNum = 1
        this.prizesList = []
        this.loadMore = false
        this.$refs.qixiScroller.scrollTo(0, this.scrollPos, false)
        this.queryMyPrizes(done)
      },
      infinite(done) {
        global.myLoad = true
        this.$refs.qixiScroller.resize()
        this.loadMore = false
        this.queryMyPrizes(done)
      },
      getDone(done) {
        this.$refs.qixiScroller.finishInfinite(2);
      },
      queryMyPrizes(done) {
        this.$ajax.activity.myPrizes({
          pageNum: this.pageNum,
          pageSize: 15,
          activityId: 'ACTIVITY_20181010',
          confirmStatus: 1
        })
          .then((res) => {
            if (done) {
              done()
            }
            if (res.body.content.list && res.body.content.list != null) {
              if (this.pageNum == 1) {
                this.prizesList = res.body.content.list
              } else {
                this.prizesList = this.prizesList.concat(res.body.content.list)
              }
              if (res.body.content.list.length >= 15) {
                this.pageNum++
                this.loadMore = true
              } else {
                this.loadMore = false
              }
            }
          })
      },

      gameStart() {
        if (!this.comJS.getCookie('t')) {
          this.Interactive.pushTokentoJS();
          return
        }
        this.$ajax.activity.queryPrizesAndLotteryNumber({activityId:'ACTIVITY_20181010'})
          .then((res)=>{
            this.frequency = res.body.content.lotteryNumber
            if(res.body.content.activityStatus == 0){
              this.$vux.alert.show({
                title:'操作提示',
                content:'活动未开始',
              })
              return
            }
            if(res.body.content.activityStatus == 2){
              this.$vux.alert.show({
                title:'操作提示',
                content:'活动已结束',
              })
              return
            }
            if(res.body.content.activityStatus == 1){
              if(this.frequency <= 0){
                this.$vux.alert.show({
                  title:'操作提示',
                  content:'您没有游戏次数',
                })
                return
              }
              this.gameStatus = 'start'
              this.countdownStart()
            }else{
              this.$vux.alert.show({
                title:'操作提示',
                content:'活动不在进行中',
              })
            }
          })
      },
      turnActiveWheel(){


        this.$ajax.activity.turnActiveWheel({activityId:'ACTIVITY_20181010'})
          .then((res)=>{
            this.gameStatus = 'end'
            this.prizesId = res.body.content.prizesId
            this.affirmPrizes()
          }).catch(()=>{
          this.gameStatus = 'end'
          this.gameEndShow=false;
        })
      },
      affirmPrizes(data){
        this.$ajax.activity.affirmPrizes({activityId:'ACTIVITY_20181010',prizesId:this.prizesId})
          .then((res) => {
            this.gameEndShow=true;
            this.frequency = res.body.content.lotteryNumber
            this.prizes = res.body.content
          })
      },
      countdownStart() {
        if (this.countdown == -1) {
          this.gameStatus = 'game'
          this.setRed()
          this.cakeMove()
          this.gameTimeRe()
        }
        setTimeout(() => {
          if(this.gameStatus == 'start'){
            if (this.countdown >= 0) {
              this.countdown--
              console.log(this.countdown)
              this.countdownStart()
            }
          }
        }, 1000)
      },
      gameTimeRe(){
        setTimeout(()=>{
          if(this.gameStatus == 'game'){
            if(this.gameTime > 0){
              this.gameTime--
              this.gameTimeRe()
            }
          }

        },1000)
      },
      setRed() {
        if(this.gameStatus != 'game'){
          return
        }
        for (let i = this.cakeArr.length; i < this.cakeArrLength; i++) {
          let obj = {
            width: Math.floor(this.$refs.advertBox.offsetWidth / 750 * 224),
            top: Math.floor(Math.random() * 1400 - 1000),
            left: this.$refs.advertBox.offsetWidth + Math.floor(Math.random() * 400),
            speed: Math.floor(Math.random() * 2 + 1),
            class:Math.floor(Math.random() *3 +1),
            className:'',
            size:Math.floor(Math.random() * 2)
          }
          if(obj.class == 1){
            obj.className = 'one'
          }else if(obj.class == 2){
            obj.className = 'two'
          }
          if(obj.size == 0){
            obj.width = Math.floor(obj.width * 0.8)
          }


          let statu = 0
          this.cakeArr.forEach((v) => {
            if (!v.isCake) {
              statu = 1
              return false
            }
          })
          if (statu == 1) {
            obj.isCake = 1
          } else {
            obj.isCake = 0
          }
          // if(this.ll(obj)){
            this.cakeArr.push(obj)
          // }
        }
      },
      //去重
      ll(obj) {
        let sty = 0
        this.cakeArr.forEach((v) => {
          if (v.top + v.width < obj.top || v.left > obj.left + obj.width || obj.top > v.top + v.width || v.left + v.width < obj.left) {
          } else {
            sty = 1
            return true
          }
        })
        if (sty) {
          return false
        } else {
          return true
        }
      },
      cakeMove() {
        if(this.gameStatus != 'game'){
          return
        }
        let that = this
        this.cakeArr.map((v, i) => {
          v.top = v.top + v.speed
          v.left = v.left - v.speed
          if (v.top >= that.$refs.advertBox.offsetHeight || v.left + v.width <= 0) {
              v.width = Math.floor(this.$refs.advertBox.offsetWidth / 750 * 224),
              v.top = Math.floor(Math.random() * 1400 - 1000),
              v.left = this.$refs.advertBox.offsetWidth + Math.floor(Math.random() * 400),
              v.speed = Math.floor(Math.random() * 2 + 1),
              v.class = Math.floor(Math.random() *3 +1),
              v.className = '',
              v.size = Math.floor(Math.random() * 2)
            if(v.class == 1){
              v.className = 'one'
            }else if(v.class == 2){
              v.className = 'two'
            }
            if(v.size == 0){
              v.width = Math.floor(v.width * 0.8)
            }
         }
        })
        if (this.gameStatus == 'game') {
          setTimeout(() => {
            if(this.gameStatus == 'game'){
              this.cakeMove()
            }
          }, 10)
        }
      },
      cakeBoxClick(data){
        data.className = 'click'
        data.speed = 0
        setTimeout(()=>{
          data.width = Math.floor(this.$refs.advertBox.offsetWidth / 750 * 224),
            data.top = Math.floor(Math.random() * 1400 - 1000),
            data.left = this.$refs.advertBox.offsetWidth + Math.floor(Math.random() * 400),
            data.speed = Math.floor(Math.random() * 2 + 1),
            data.class = Math.floor(Math.random() *3 +1),
            data.className = '',
            data.size = Math.floor(Math.random() * 2)
          if(data.class == 1){
            data.className = 'one'
          }else if(data.class == 2){
            data.className = 'two'
          }
          if(data.size == 0){
            data.width = Math.floor(v.width * 0.8)
          }
        },500)
      }
    },
    watch:{
      gameTime:function () {
        if(this.gameTime <= 0 && this.gameStatus == 'game'){
          this.turnActiveWheel()
        }
      }
    }
  }
</script>
<style lang="less" scoped>
    .cakeBox {
        width: 100%;
        height: 100%;
        overflow: hidden;
        li {
            background-image: url("../../assets/img/RedEnvelopeRain_red.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-color: transparent;
            position: absolute;
            z-index: 2;
            &.one {
                background-image: url("../../assets/img/RedEnvelopeRain_red_one.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
            &.two {
                background-image: url("../../assets/img/RedEnvelopeRain_red_two.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
            &.click{
                width: 2.88rem !important;
                height: 2.2rem !important;
                background-image: url("../../assets/img/RedEnvelopeRain_click.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                z-index: 0;
            }
            &.none{
                display: none;
            }
        }
    }

    .startBefore_box {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background-image: url("../../assets/img/RedEnvelopeRain_startBeforeBg3.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .startbtn {
            display: block;
            width: 4rem;
            height: .98rem;
            background-image: url("../../assets/img/RedEnvelopeRain_startbtn.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 1rem;
            margin: auto;
        }
        p {
            font-size: .24rem;
            color: #ffe155;
            text-align: center;
            line-height: 1.5;
            text-decoration: underline;
            position: absolute;
            left: 0;
            right: 0;
            bottom: .5rem;
            margin: auto;
        }
    }

    .gameStart_box {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background-image: url("../../assets/img/RedEnvelopeRain_gameStart.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .start_bgColor {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .start_three {
        width: 6rem;
        height: 3.6rem;
        background-image: url("../../assets/img/RedEnvelopeRain_startThree.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .start_two {
        width: 6rem;
        height: 3.6rem;
        background-image: url("../../assets/img/RedEnvelopeRain_startTwo.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .start_one {
        width: 6rem;
        height: 3.6rem;
        background-image: url("../../assets/img/RedEnvelopeRain_startOne.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .start_go {
        width: 6rem;
        height: 3.6rem;
        background-image: url("../../assets/img/RedEnvelopeRain_startGo.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .gameTime
    {
        position: absolute;
        left: .2rem;
        top: .2rem;
        width: .8rem;
        height: .94rem;
        background-image: url("../../assets/img/RedEnvelopeRain_gameTime.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 10;
        line-height: 1.1rem;
        text-align: center;
        font-size: .24rem;
        color: #fff;

    }
</style>
<style lang="less" scoped>
    @import "../../less/_variable";
    .v-transfer-dom > .vux-popup-dialog.vux-popup-top{
        background-color: transparent;
    }
    .v-transfer-dom.myPrizes > .vux-popup-dialog.vux-popup-top {
        width: 80.53%;
        height: auto !important;
        position: absolute;
        left: 9.73%;
        top: 15%;
        border-radius: 0.2rem;
        background: #fff;

        .vux-scrollable {

            .show_header_title {

                .title {
                    margin: 0.42rem 0;
                    font-size: 0.34rem;
                    color: #333;
                    text-align: center;
                }

                span {
                    width: 0.3rem;
                    height: 0.3rem;
                    background: url('../../assets/img/close.png') no-repeat center center;
                    background-size: 100% 100%;
                    position: absolute;
                    top: 0.3rem;
                    right: 0.3rem;
                }

            }
            .show_list {
                width: 100%;
                height: 8rem;
                overflow: hidden;
                border-top: 1px solid #efefef;
                position: relative;
                .list_cont {
                    display: flex;
                    padding-left: .16rem;
                    .fight_left {
                        width: 100%;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: nowrap;
                        align-items: center;
                        padding: .12rem 0 .06rem;
                        border-bottom: 1px solid #f5f5f5;
                        &:last-child {
                            border: none;
                        }
                        img {
                            width: 1.1rem;
                        }

                        .list_time {
                            margin-top: 0.2rem;
                            margin-left: 0.16rem;
                            .name {
                                color: #222;
                                font-size: .28rem;
                                margin-bottom: 0.16rem;
                            }

                            .time {
                                color: #909090;
                                font-size: .24rem;
                            }

                        }
                    }
                }
            }
            .show_bottom {
                border-top: 1px solid #efefef;
                padding: .42rem 0.2rem .54rem;
                text-align: center;
                font-size: .24rem;
                line-height: 1.5;
                .select {
                    color: @c_lordColor;
                }
            }
        }
    }
        .gameEnd{
            width: 4.12rem;
            height: 5.7rem;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background: url('../../assets/img/RedEnvelopeRain_gameNo.png') no-repeat center center;
            background-size: 100% 100%;
            padding: 2.74rem .58rem 1.2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            &.ok{
                background: url('../../assets/img/RedEnvelopeRain_gameOk.png') no-repeat center center;
                background-size: 100% 100%;
            }
            img{
                width: 100%;
            }
            &.active{
                padding: 1.8rem 0rem 2rem;
                img{
                    width: 6rem;
                }
                &>p{
                    transform: translateY(-.8rem);
                }
            }
            p{
                font-size: .34rem;
                color: #252525;
            }
            .gameEndBth{
                width: 4rem;
                height: .96rem;
                background: url('../../assets/img/RedEnvelopeRain_gameEndBth.png') no-repeat center center;
                background-size: 100% 100%;
                position: absolute;
                left: 0;
                right: 0;
                bottom: -2rem;

                &.ok{
                    background: url('../../assets/img/RedEnvelopeRain_gameEndBth_ok.png') no-repeat center center;
                    background-size: 100% 100%;
                }
                p{
                    font-size: .24rem;
                    color: #ffe155;
                    text-align: center;
                    line-height: 1.5;
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: -.5rem;
                    margin: auto;
                }
            }
        }

</style>